<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动化CI连跑分析页</title>

    <style type="text/css">
            LogTitle {
                display: block;
                background-color: #b6d7a8;
                font-size: 20px;
                padding: 10px; }
    </style>
</head>
<body>
{% extends 'base.html' %}
{% block body_part %}
{% load static %}
<LogTitle><em><b>Master图表分析</b></em></LogTitle>
<div id="images300">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4" style="float: left;">
                <div class="echarts" id="pie_master"
                     style="width: 100%; height:450px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4" style="float: right;">
                <div class="echarts" id="linechart_master"
                     style="width: 90%; height:450px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4" style="float: right;">
                <div class="echarts" id="barchart_master"
                     style="width: 100%; height:450px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
</div>
<p></p>

<LogTitle><em><b>2.0.0图表分析</b></em></LogTitle>
<div id="images">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4" style="float: left;">
                <div class="echarts" id="pie"
                     style="width: 100%; height:450px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4" style="float: right;">
                <div class="echarts" id="linechart"
                     style="width: 90%; height:450px; margin: 0 auto"></div>
            </div>

            <div class="col-md-4" style="float: right;">
                <div class="echarts" id="barchart"
                     style="width: 100%; height:450px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
</div>
<p></p>

<div>
    <LogTitle><em><b>bug详情</b></em></LogTitle>
    <table id="bug_info_table" class="table table-hover">
    </table>
    <br>
    <LogTitle><em><b>core详情</b></em></LogTitle>
    <table id="core_info_table" class="table table-hover">
    </table>
    <br>
    <LogTitle><em><b>重复失败用例统计</b></em></LogTitle>
    <table id="re_er_table" class="table table-hover">
    </table>
    <br>
</div>
<script type="text/javascript">
    var bug_info_table = $("#bug_info_table");
    bug_info_table.bootstrapTable("destroy").bootstrapTable({
        url: "{% url 'get_bug_data' %}",
        dataType: "json",
        sidePagination: "server",
        method: 'get',
        height: 300,
        columns: [{
            field: "feature_name",
            title: "特性",
            align: 'center',
            width: "6%",
            sortable: false
        },{
            field: "issue_no",
            title: "issue编号",
            align: 'center',
            width: "5%",
            sortable: false,
        },{
            field: "title",
            title: "标题",
            align: 'center',
            width: "15%",
            sortable: false,
        },{
            field: "priority",
            title: "优先级",
            align: 'center',
            width: "3%",
            sortable: false,
        },{
            field: "creater",
            title: "创建人",
            align: 'center',
            width: "3%",
            sortable: false,
        },{
            field: "assignee",
            title: "开发责任人",
            align: 'center',
            width: "3%",
            sortable: false,
        },{
            field: "status",
            title: "状态",
            align: 'center',
            width: "3%",
            sortable: false,
        },{
            field: "create_date",
            title: "创建日期",
            align: 'center',
            width: "5%",
            sortable: false,
        },{
            field: "run_os",
            title: "执行环境",
            align: 'center',
            width: "3%",
            sortable: false,
        },{
            field: "schd_name",
            title: "测试套名",
            align: 'center',
            width: "4%",
            sortable: false,
        },{
            field: "er_num",
            title: "用例数",
            align: 'center',
            width: "6%",
            sortable: false,
        },{
            field: "ip_name",
            title: "执行机host",
            align: 'center',
            width: "4%",
            sortable: false,
        }]})

    var core_info_table = $("#core_info_table");
    core_info_table.bootstrapTable("destroy").bootstrapTable({
        url: "{% url 'get_core_data' %}",
        dataType: "json",
        sidePagination: "server",
        method: 'get',
        height: 300,
        columns: [{
            field: "feature_name",
            title: "特性",
            align: 'center',
            width: "5%",
            sortable: false
        },{
            field: "run_os",
            title: "执行环境",
            align: 'center',
            width: "5%",
            sortable: false
        },{
            field: "model_name",
            title: "测试套名",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "start_time",
            title: "开始时间",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "run_time",
            title: "执行时间",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "ip_name",
            title: "执行机host",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "core_num",
            title: "core数量",
            align: 'center',
            width: "5%",
            sortable: false,
        }]})

    var re_er_table = $("#re_er_table");
    re_er_table.bootstrapTable("destroy").bootstrapTable({
        url: "{% url 'get_re_er_data' %}",
        dataType: "json",
        sidePagination: "server",
        method: 'get',
        height: 400,
        columns: [{
            field: "feature_name",
            title: "特性",
            align: 'center',
            width: "5%",
            sortable: false
        },{
            field: "num",
            title: "历史累计失败次数",
            align: 'center',
            width: "5%",
            sortable: false
        },{
            field: "model_name",
            title: "测试套名",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "tc_name",
            title: "用例名",
            align: 'center',
            width: "10%",
            sortable: false,
        },{
            field: "test_owner",
            title: "测试责任人",
            align: 'center',
            width: "10%",
            sortable: false,
        }]})

    var myPie = echarts.init(document.getElementById('pie'));
    $(document).ready(function(){
        $.get("{% url 'get_images_data' %}", function(data,status){
            var json_data = JSON.parse(data);
            var legend_data = [];
            if (JSON.stringify(json_data.pie_data_1)==="[]")
            {
                json_data.pie_data_1 = [{'name': 'success',
                    'value': json_data.tier2_total_num}]
                legend_data.push('success-1');
                legend_data.push('success-2');
                var series = [{
                    name: '成功',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    selectedMode: 'single',
                    radius: ['0%', '70%'],
                    center: ['50%', '46%'],
                    data: json_data.pie_data_1,
                    itemStyle: {
                        normal: {
                            color: 'rgb(172, 199, 119)',
                            label: {
                                show: true,
                                position: 'right',
                                fontSize: 14,
                                color: 'rgb(47, 57, 27)',
                                formatter: "{b}: \n{c} ({d}%)"}}}}];
            }
            else {
                var series = [{
                    name: '问题类型',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    selectedMode: 'single',
                    radius: ['60%', '80%'],
                    center: ['50%', '56%'],
                    data: json_data.pie_data_1,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                fontSize: 14,
                                formatter: "{b}: \n{c} ({d}%)"}}}
                },{
                    name: '问题状态',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    radius: [0, '55%'],
                    center: ['50%', '56%'],
                    data: json_data.pie_data_2,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                fontSize: 14,
                                formatter: "{b}: {c}"}}}
                }]
            }

            for (var i in json_data.pie_data_1) {
                legend_data.push(json_data.pie_data_1[i]['name']);
            }
            for (var i in json_data.pie_data_2) {
                legend_data.push(json_data.pie_data_2[i]['name']);
            }
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    y: 'top',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: ' left',
                                fontSize: 14,
                            }
                        }
                    },
                    data: legend_data
                },
                title: {
                    text: '自动化连跑失败类别占比饼图',
                    x: 'center',
                    y: 'top'
                },
                series: series
            };
            myPie.setOption(option);

			var myPieMaster = echarts.init(document.getElementById('pie_master'));
            var legend_data_master = [];
            if (JSON.stringify(json_data.pie_data_1_master)==="[]")
            {
                json_data.pie_data_1_master = [{'name': 'success',
                    'value': json_data.master_total_num}]
                legend_data_master.push('success-1');
                legend_data_master.push('success-2');
                var series = [{
                    name: '成功',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    selectedMode: 'single',
                    radius: ['0%', '70%'],
                    center: ['50%', '46%'],
                    data: json_data.pie_data_1_master,
                    itemStyle: {
                        normal: {
                            color: 'rgb(172, 199, 119)',
                            label: {
                                show: true,
                                position: 'right',
                                fontSize: 14,
                                color: 'rgb(47, 57, 27)',
                                formatter: "{b}: \n{c} ({d}%)"}}}}];
            }
            else {
                var series = [{
                    name: '问题类型',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    selectedMode: 'single',
                    radius: ['60%', '80%'],
                    center: ['50%', '56%'],
                    data: json_data.pie_data_1_master,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                fontSize: 14,
                                formatter: "{b}: \n{c} ({d}%)"}}}
                },{
                    name: '问题状态',
                    type: 'pie',
                    avoidLabelOverlap: true,
                    radius: [0, '55%'],
                    center: ['50%', '56%'],
                    data: json_data.pie_data_2_master,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                fontSize: 14,
                                formatter: "{b}: {c}"}}}
                }]
            }

            for (var i in json_data.pie_data_1_master) {
                legend_data.push(json_data.pie_data_1_master[i]['name']);
            }
            for (var i in json_data.pie_data_2_master) {
                legend_data.push(json_data.pie_data_2_master[i]['name']);
            }
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    y: 'top',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: ' left',
                                fontSize: 14,
                            }
                        }
                    },
                    data: legend_data
                },
                title: {
                    text: '自动化连跑失败类别占比饼图',
                    x: 'center',
                    y: 'top'
                },
                series: series
            };
            myPieMaster.setOption(option);

            var myLineChart = echarts.init(document.getElementById('linechart'));
            var line_chart_option = {
                title: {
                    text: '最近七日自动化成功率折线图',
                    x: 'center',
                    y: 'top',
                },
                grid: {
                    top: '18%'
                },
                tooltip: {trigger: 'axis'},
                legend: {
                    x: 'right',
                    y: '7%',
                    data: ['x86_CentOS', 'x86_openEuler']
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    data: json_data.line_x_data,
                    axisLabel: {
                        rotate: 0,
                        interval: 0
                    }
                },
                yAxis: {
                    name: '成功率（%）',
                    type: 'value',
                    min: 0,
                    max: 100
                },
                series: [{
                    name: 'x86_CentOS',
                    type: 'line',
                    data: json_data.line_y_data[0],
                    symbolSize: 5,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            borderColor: 'blue',
                            lineStyle: {
                                width: 2
                            }
                        }
                    }
                },
                {
                    name: 'x86_openEuler',
                    type: 'line',
                    data: json_data.line_y_data[1],
                    symbolSize: 5,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            borderColor: 'green',
                            lineStyle: {
                                width: 2
                            }
                        }
                    }
                }]
            };
            myLineChart.setOption(line_chart_option);

            var myLineChartMaster = echarts.init(document.getElementById
            ('linechart_master'));
            var line_chart_option_master = {
                title: {
                    text: '最近七日自动化成功率折线图',
                    x: 'center',
                    y: 'top',
                },
                grid: {
                    top: '18%'
                },
                tooltip: {trigger: 'axis'},
                legend: {
                    x: 'right',
                    y: '7%',
                    data: ['x86_CentOS', 'x86_openEuler']
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    data: json_data.line_x_data_master,
                    axisLabel: {
                        rotate: 0,
                        interval: 0
                    }
                },
                yAxis: {
                    name: '成功率（%）',
                    type: 'value',
                    min: 0,
                    max: 100
                },
                series: [{
                    name: 'x86_CentOS',
                    type: 'line',
                    data: json_data.line_y_data_master[0],
                    symbolSize: 5,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            borderColor: 'blue',
                            lineStyle: {
                                width: 2
                            }
                        }
                    }
                },
                {
                    name: 'x86_openEuler',
                    type: 'line',
                    data: json_data.line_y_data_master[1],
                    symbolSize: 5,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            borderColor: 'green',
                            lineStyle: {
                                width: 2
                            }
                        }
                    }
                }]
            };
            myLineChartMaster.setOption(line_chart_option_master);

            var myBarChart = echarts.init(document.getElementById('barchart'));
            <!--生成series数据，每个series_option对应一个柱形-->
            var series_option = {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            }
                        };
            var series_data = [];
            for (var i=0,len=json_data.bar_dimensions.length-1; i<len; i++) {
                series_data.push(series_option);
            };

            <!--格式化data，以免柱形图显示0-->
            for (var i in json_data.bar_source) {
                for (var j in json_data.bar_source[i]) {
                    if (json_data.bar_source[i][j] == 0) {
                        json_data.bar_source[i][j] = '';
                    }
                };
            };

            var option = {
                    legend: {
                        x: 'right',
                        y: '7%'
                    },
                    title: {
                        text: '最近七日失败用例类型统计柱形图',
                        x: 'center',
                        y: 'top',
                    },
                    grid: {
                        top: '20%'
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: json_data.bar_dimensions,
                        source: json_data.bar_source
                    },
                    xAxis: {
                        type: 'category',
                        name: '日期',
                        axisLabel: {
                            rotate: 0,
                            interval: 0
                        }
                    },
                    yAxis: {name: '失败用例（个）'},
                    series: series_data
                };
            myBarChart.setOption(option);

			var myBarChartMaster = echarts.init(document.getElementById
			('barchart_master'));
            <!--生成series数据，每个series_option对应一个柱形-->
            var series_option_master = {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'top'
                                    }
                                }
                            }
                        };
            var series_data_master = [];
            for (var i=0,len=json_data.bar_dimensions_master.length-1;
            i<len; i++) {
                series_data_master.push(series_option_master);
            };

            <!--格式化data，以免柱形图显示0-->
            for (var i in json_data.bar_source_master) {
                for (var j in json_data.bar_source_master[i]) {
                    if (json_data.bar_source_master[i][j] == 0) {
                        json_data.bar_source_master[i][j] = '';
                    }
                };
            };

            var option = {
                    legend: {
                        x: 'right',
                        y: '7%'
                    },
                    title: {
                        text: '最近七日失败用例类型统计柱形图',
                        x: 'center',
                        y: 'top',
                    },
                    grid: {
                        top: '20%'
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: json_data.bar_dimensions_master,
                        source: json_data.bar_source_master
                    },
                    xAxis: {
                        type: 'category',
                        name: '日期',
                        axisLabel: {
                            rotate: 0,
                            interval: 0
                        }
                    },
                    yAxis: {name: '失败用例（个）'},
                    series: series_data_master
                };
            myBarChartMaster.setOption(option);
        });
    });
</script>
{% endblock %}
</body>
</html>